<template>
  <div>
    <!-- 有子项的情况 -->
    <ul v-if="item.children && item.children.length > 0">
      <li>
        <!-- 如果有link用link没有用path -->
        <router-link :to="item.link || item.path">{{ item.title }}</router-link>
        <!-- 递归子项  -->
        <template v-for="(c, i) of item.children">
          <menu-item :key="i" :item="c"></menu-item>
        </template>
      </li>
    </ul>
    <!-- 没有子项的情况 -->
    <ul v-else>
      <router-link :to="item.link || item.path">{{ item.title }}</router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MenuItem",
  props: {
    item: Object,
  },
};
</script>